<template>
<div class="slider" ref="slider">
  <div class="slider-group" ref="sliderGroup">
  <slot ></slot>
  </div>
  <div class="list-right">
    <!--<div class="list-top">-->
      <!--<span class="dot"></span>-->
    <!--</div>-->
    <div class="list" v-for="(item,index) in dots" :key="index">
      <div class="list-dot">
        <span class="dot " :class="{active:currentPageIndex === index}"></span>
      </div>
      <div class="list-content">PHP相关</div>
    </div>
  </div>
</div>
</template>

<script>
import {addClass} from 'common/js/dom'
import BScroll from 'better-scroll'
export default {
  name: 'slider',
  data () {
    return {
      dots: [],
      currentPageIndex: 0
    }
  },
  props: {
    loop: {
      type: Boolean,
      default: true
    },
    autoPlay: {
      type: Boolean,
      default: true
    },
    interval: {
      type: Number,
      default: 4000
    }
  },
  mounted () {
    setTimeout(() => {
      this._setSliderHeight()
      this._initSlider()
      this._initDots()
      //
      if (this.autoPlay) {
        this._play()
      }
    }, 20)

    // // 监听窗口大小，防止窗口改变造成图片大小改变
    // window.addEventListener('resize', () => {
    //   if (!this.slider) {
    //     return
    //   }
    //   this._setSliderWidth(true)
    //   this.slider.refresh()
    // })
  },
  activated () {
    if (this.autoPlay) {
      this._play()
    }
  },
  deactivated () {
    clearTimeout(this.timer)
  },
  beforeDestroy () {
    clearTimeout(this.timer)
  },
  methods: {
    _setSliderHeight () {
      this.children = this.$refs.sliderGroup.children
      let height = 0
      let sliderHeight = this.$refs.sliderGroup.clientHeight
      for (let i = 0; i < this.children.length; i++) {
        let child = this.children[i]
        addClass(child, 'slider-item')
        child.style.height = sliderHeight + 'px'
        height += sliderHeight
      }
      if (this.loop) {
        height += 2 * sliderHeight
      }
      this.$refs.slider.style.height = height
      console.log(height)
    },
    _initSlider () {
      this.slider = new BScroll(this.$refs.slider, {
        scrollX: false,
        scrollY: true,
        momentum: false,
        snap: {
          loop: this.loop,
          threshold: 0.3,
          speed: 400
        },
        click: true
      })

      // 滚动完毕时触发一个 srollEnd事件
      this.slider.on('scrollEnd', () => {
        let pageIndex = this.slider.getCurrentPage().pageY
        console.log(pageIndex)
        this.currentPageIndex = pageIndex
        console.log('开始啦')
        if (this.autoPlay) {
          this._play()
        }
      })

      this.slider.on('beforeScrollStart', () => {
        if (this.autoPlay) {
          clearTimeout(this.timer)
        }
      })
      console.log(this.slider)
    },
    _initDots () {
      this.dots = new Array(this.children.length - 2)
      console.log(this.dots)
    },
    _play () {
      let pageIndex = this.currentPageIndex + 1
      this.timer = setTimeout(() => {
        this.slider.goToPage(0, pageIndex, 400)
      }, this.interval)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .slider
    position relative
    width 530px
    height 204px
    background red
    margin 0 auto
    overflow hidden
    white-space: nowrap
    .slider-group
      float left
      width 400px
      background #25a4bb
      /*.slider-item*/
        /*border #cacaca 1px solid*/
    .list-right
      float right
      width 130px
      height 204px
      background #0000cc
      .list
        margin 10px 5px
        width: 16px
        height: 16px
        .dot
          float left
          display: inline-block

          width: 16px
          height: 16px
          border-radius: 50%
          background: #ffffff
          &.active
            width: 20px
            border-radius: 5px
            background: #cacaca
        .list-content
          display inline-block
          margin-left 10px
      /*.slider-item*/
        /*.item-title*/
        /*.item-content*/
        /*.item-info*/

</style>
